<template>
	<movable-area class="page_wrap">
		<u-top-tips ref="uTips" :navbar-height="0" z-index="19999" />
		<Loading :showLoading="loading" />

		<view class="topBox" v-show="!scrolled">
			<view class="position_wrap p16">
				<u-icon name="map" size="38" />
				<view class="pl16 pr30" @click="openPosition = true">
					{{ addressInfo.addressName }}
					<!-- <u-icon name="arrow-down" size="38" class="arrow pl8" /> -->
					<image src="@/static/newUi/arrowDown.png" mode=""></image>
				</view>
				<u-icon name="reload" size="38" @click="getPosition" />
			</view>
			<!-- <view class="search_wrap p16">
		  <u-search class="search_box" v-model="searchKey" @search="getStoreList" @custom="getStoreList" @clear="getStoreList" />
		</view> -->
			<view class="searchBox">
				<u-input type="text" :clearable="false" v-model="searchKey" placeholder="搜索你想要的内容" confirm-type="search"
					@confirm="getStoreList" @clear="getStoreList" @custom="getStoreList"
					@search="getStoreList"></u-input>
				<image src="@/static/newUi/search.png" @click="getStoreList"></image>
			</view>
		</view>

		<!-- 当前门店详情 -->
		<u-card v-if="storeInfo.id" class="store_wrap" margin="0rpx" :head-style="{ display: 'none' }"
			v-show="!scrolled">
			<view slot="body" class="merchat">
				<view class="info">
					<view class="">
						<!-- <view class="" @click="openStore = true"> -->
						<view class="" @click="isShowMore = !isShowMore">
							<view class="">{{ storeInfo.storeName }}</view>
							<view v-if="storeRun&&!isDiscount()" class="ing">
								<view>距结束</view>
								<u-count-down :timestamp="storeCountDown" :show-days="false" />
							</view>
							<view v-if="storeRun&&isDiscount()" class="ings">
								<view>限时优惠</view>
								<u-count-down :timestamp="discountCountDown" :show-days="false" />
							</view>
							<view v-if="!storeRun" class="business_status end"> 营业时间<text>歇业中</text> </view>
							<!-- <img src="@/static/newUi/star.png" v-if="!storeInfo.isFavorite"
										@click.stop="toggleFavorite">
									<img src="@/static/newUi/star_check.png" v-else @click.stop="toggleFavorite"> -->
						</view>
						<view class="score">
							<view>
								口味<text>{{ storeInfo.flavorScore }}分</text>
							</view>
							<view>
								包装<text>{{ storeInfo.packagingScore }}分</text>
							</view>
							<view>
								份量<text>{{ storeInfo.componentScore }}分</text>
							</view>
						</view>
						<view class="tagBox">
							<view class="">
								<view>
									营业时间:{{ storeBusinessRange }}
								</view>
								<template v-if="storeInfo.desList && storeInfo.desList.length">
									<view class="" v-for="tag in storeInfo.desList" :key="tag">
										{{tag}}
									</view>
								</template>
							</view>
						</view>
					</view>
					<image :src="storeInfo.logo | getImg" mode="aspectFill" @click="isShowMore=true" />
				</view>
				<view class="describe" :class="{'showMore':isShowMore}"
					v-show="storeInfo.storeDescription&&!isShowMore">
					{{ storeInfo.storeDescription }}
					<image src="@/static/newUi/arrow_down2.png" class="arrow" mode="" @click="isShowMore=true">
					</image>
				</view>
				<view class="introduce" v-show="isShowMore">
					<view class="title">
						<view>商家资质</view>
						<image src="@/static/newUi/arrow_down2.png" mode="" @click="isShowMore=false"></image>
					</view>
					<view class="imgBox">
						<image :src="_ | getImg" mode="aspectFit" v-for="(_, i) in storeInfo.qualifications.split(',')"
							:key="i" />
					</view>
					<template v-if="storeInfo.storeDescription">
						<view class="title">公告</view>
						<view class="des">
							{{ storeInfo.storeDescription }}
						</view>
					</template>
				</view>
			</view>
			<!-- <view slot="body">
				<image :src="storeInfo.logo | getImg" mode="aspectFill" @click="openStore = true" />
				<view class="r_box">
					<view class="storeInfo_item name">
						<text class="fz34 b" @click="openStore = true">{{ storeInfo.storeName }}</text>
						<view v-if="storeRun" class="business_status ing">
							<view>距结束</view>
							<u-count-down :timestamp="storeCountDown" :show-days="false" />
						</view>
						<view v-else class="business_status end"> 营业时间<text>歇业中</text> </view>
						<view class="storeInfo_item tag" v-show="storeInfo.desList && storeInfo.desList.length">
							<u-tag v-for="tag in storeInfo.desList" :key="tag" :text="tag" type="warning"
								shape="circle" />
						</view>
					</view>
					<view class="storeInfo_item score">
						<view>
							口味<text>{{ storeInfo.flavorScore }}分</text>
						</view>
						<view>
							包装<text>{{ storeInfo.packagingScore }}分</text>
						</view>
						<view>
							份量<text>{{ storeInfo.componentScore }}分</text>
						</view>
					</view>
					<view class="storeInfo_item time">
						<view>
							营业时间<text class="pl16">{{ storeBusinessRange }}</text>
						</view>
						<u-icon name="heart-fill" :color="storeInfo.isFavorite == '1' ? '#fc360b' : '#ccc'" size="36"
							@click="toggleFavorite" />
					</view>
					<view class="storeInfo_item desc fz24" v-show="storeInfo.storeDescription">
						{{ storeInfo.storeDescription }}
					</view>
					<view class="storeInfo_item tag" v-show="storeInfo.desList && storeInfo.desList.length">
						<u-tag v-for="tag in storeInfo.desList" :key="tag" :text="tag" type="warning" shape="circle" />
					</view>
				</view>
			</view> -->
		</u-card>

		<view class="content_wrap mt12" :style="{height:contentHeight}" v-if="storeList.length">
			<!-- 门店列表 -->
			<scroll-view class="store_list fz28" :scroll-y="content_scroll" :scroll-into-view="storeTop"
				scroll-with-animation>
				<view :class="`store_item ${storeId === _.id ? 'active' : ''}`" v-for="(_, i) in storeList" :key="_.id"
					:id="`store_${_.id}`" @click="toggleStore(_)">
					<view :class="`bg plr20 ptb24`">
						<text>{{ _.storeName }}</text>
					</view>
				</view>
			</scroll-view>
			<!-- 菜品列表 -->
			<scroll-view class="dishes_list" :scroll-y="content_scroll" :scroll-into-view="dishesTop"
				scroll-with-animation @scroll="dishesScroll">
				<view class="dishes_item mb48" v-for="(_, i) in dishesList" :key="_.id" :id="`dishes_${_.id}`">
					<u-lazy-load :image="_.productPicture | getImg" :loading-img="loadingImg" img-mode="aspectFill" />
					<!-- <image :src="_.productPicture | getImg" lazy-load mode="aspectFill" /> -->
					<view class="required" v-if="_.requiredFlag == '是'">必选</view>
					<view class="r_box">
						<view class="dishesInfo_item name fz30 b">
							<view class="">{{ _.tradeName }}</view>
							<view class="remain" v-if="_.limitBuy > -1">剩余{{ _.remainingQuantity }}</view>
						</view>
						<view class="dishesInfo_item desc">
							{{ _.productDescription }}
						</view>
						<view class="dishesInfo_item price_remain">
							<text class="price fz30">
								<text v-if="isDiscount(_)">
									￥{{ accSub(_.commodityPriceCache,_.limitOfferAmount)}}
								</text>
								<text :class="{'disable':isDiscount()}">
									￥<text v-if="isDiscount()">原价</text>{{_.commodityPriceCache}}
								</text>
							</text>
							<view v-if="_.specificationsFlag == '是'" class="dishesInfo_item spec">
								<view class="badge_p" @click="showSpec(_, i)">
									<u-tag class="fz28" text="选规格" type="warning" mode="dark" />
									<u-badge type="error" :count="specCount(_, i)" :offset="[-10, -10]"
										:key="`${shopCarInfo.totalPrice}_${_.id}`" />
								</view>
							</view>
							<view v-else class="dishesInfo_item qty">
								<!-- <u-number-box class="dishes_numbox" v-model="_.shoppingCartCount" :data-id="_.id"
									@plus="qtyChange(1, _)" @minus="qtyChange(-1, _)" :disabled="!storeRun"
									:max="_.limitBuy > -1 ? _.remainingQuantity : undefined" disabled-input /> -->
								<img src="@/static/newUi/down.png" alt="" @click="qtyChange(-1, _)"
									v-if="_.shoppingCartCount>0">
								<img src="@/static/newUi/down.png" alt="" v-else>
								<u-input type="number" placeholder="" v-model="_.shoppingCartCount"
									:max="_.limitBuy > -1 ? _.remainingQuantity : undefined" disabled></u-input>
								<img src="@/static/newUi/up.png" alt="" @click="qtyChange(1, _)"
									v-if="storeRun&&_.shoppingCartCount<(_.limitBuy > -1 ? _.remainingQuantity:99999)">
								<img src="@/static/newUi/up.png" alt="" v-else>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore status="nomore" :loadText="{ nomore: '俺实在是没有了' }" />
				<view class="" style="height:200px"></view>
			</scroll-view>
		</view>

		<view v-else class="mt100">
			<u-empty text="暂无门店" mode="page" />
		</view>

		<!-- 选位置 -->
		<!-- <u-popup v-model="openPosition" mode="bottom" closeable border-radius="40" class="position_pop">
			<view class="position_section p40">
				<view class="title mb20 fz28">{{ addressInfo.id ? '请选择您的地址' : '无法获取到位置信息，您可手动选择大厦下单' }}</view>
				<scroll-view class="position_list" :scroll-y="true">
					<view class="position_item fz30" v-for="_ in addressList" v-if="_.state == '是'"
						@click="addressChange(_)">{{ _.addressName }}</view>
				</scroll-view>
			</view>
		</u-popup> -->

		<!-- 选位置 -->
		<u-popup v-model="openPosition" mode="bottom" :closeable="false" border-radius="40" class="positionAlert">
			<view class="posiBox">
				<view class="title mb20 fz28">
					<view class="">{{ addressInfo.id ? '请选择您的地址' : '无法获取到位置信息，您可手动选择大厦下单' }}</view>
					<image src="@/static/newUi/close.png" mode="" @click="closeAddressAlert"></image>
				</view>
				<scroll-view class="posiContent" :scroll-y="true">
					<view class="posiList" v-for="(_,i) in addressList" :key="i" v-if="_.state == '是'"
						@click="_addressChange(_)" :class="{'check':tempAddressInfo.id==_.id}">
						<view class="">
							{{ _.addressName.split('区').length!=1?_.addressName.split('区')[1]:_.addressName.split('区')[0] }}
						</view>
						<view class="">
							<image src="@/static/newUi/posi.png" alt="" />
							{{ _.addressName }}
						</view>
						<image src="@/static/newUi/check.png" mode="" v-if="tempAddressInfo.id==_.id"></image>
					</view>
				</scroll-view>
				<div class="button" @click="confrimAddressSearch">确定</div>
			</view>
		</u-popup>

		<!-- 已下单标识 -->
		<!-- <movable-view class="order_fix" direction="all" x="0" y="172">
			<view v-if="orderCount" class="tips p16" @click="openOrder = true">
				已有【
				<view v-for="(_, index) in countList" :key="index" class="scroll_num">
					<text class="count_num_box" :data-val="_">0123456789</text>
				</view>
				】位用户下单
			</view>
		</movable-view> -->
		<!-- 已下单标识 -->
		<movable-view class="order_fix" direction="all" x="0" y="172">
			<view class="orderCountBox" @click="openOrder = true">
				<img src="@/static/newUi/bac.png" alt="">
				<view class="">
					已有【{{orderCount}}】位用户下单
				</view>
			</view>
		</movable-view>
		<!-- 已下单列表 -->
		<!-- <u-popup v-model="openOrder" mode="center" closeable border-radius="30" height="70%" width="90%"
			class="order_pop">
			<view class="order_section p40">
				<view class="mb16 fz30 b">{{ addressInfo.addressName }}</view>
				<view class="tips fz28">
					目前已有 <text class="fz40 b plr10">{{ orderCount }}</text> 位用户成功下单
				</view>
				<scroll-view class="order_list" :scroll-y="true">
					<view class="order_item mtb20 ptb16 pr16" v-for="(_,i) in orderList" :key="i">
						<view class="mb12">
							<text class="">{{ _.pickingSerialNo }}</text>
							<text class="c">{{ _.nameTakingMeal }}</text>
							<text>{{ _.supplyAddress }}</text>
							<text>{{ _.createTimeStr }}</text>
						</view>
						<view class="text_over">
							<text v-if="_.storeName">【{{ _.storeName }}】</text>
							<text>{{ _.nameDishes }}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup> -->
		<u-popup v-model="openOrder" mode="bottom" :closeable="false" border-radius="30" height="70%" width="100%"
			class="orderAlert">
			<view class="order_section p40">
				<image src="@/static/newUi/close.png" mode="" @click="openOrder=false" class="close"></image>
				<scroll-view class="orderList" :scroll-y="true">
					<view class="order_item mtb20 ptb16 pr16" v-for="(_,i) in orderList" :key="i">
						<text class="num">{{ _.pickingSerialNo }}</text>
						<view class="mb12">
							<text
								class="c">{{ ['L44','L46','L47','L48'].includes(_.supplyAddress)?'***':_.nameTakingMeal }}</text>
							<text>{{ ['L44','L46','L47','L48'].includes(_.supplyAddress)?'***':_.supplyAddress }}</text>
							<text>{{ _.createTimeStr }}</text>
						</view>
						<view class="text_over">
							<text v-if="_.storeName">【{{ _.storeName }}】</text>
							<text>{{ _.nameDishes }}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>

		<!-- 门店营业资质 -->
		<u-popup v-model="openStore" mode="top" closeable border-radius="40" class="store_pop">
			<view class="store_section p30">
				<view class="fz30 b c mb16">{{ storeInfo.storeName }}--门店资质</view>
				<scroll-view class="img_list" v-if="storeInfo.qualifications" :scroll-y="true">
					<image :src="_ | getImg" mode="aspectFit" v-for="(_, i) in storeInfo.qualifications.split(',')"
						:key="i" />
				</scroll-view>
				<u-empty v-else text="暂未上传" mode="page" />
			</view>
		</u-popup>
		<!-- 选规格 -->
		<u-popup v-model="openSpec" mode="bottom" :closeable="false" border-radius="40" class="spec_pop">
			<view class="spec_section">
				<image src="@/static/newUi/close.png" mode="" class="close" @click="openSpec=false"></image>
				<view class="fz32 b">
					<u-lazy-load :image="specProImg | getImg" :loading-img="loadingImg" img-mode="aspectFill" />
					<view class="">
						<view>{{ specInfo.tradeName }}</view>
						<view class="">
							已选：
							<text v-for="(_,i) in specInfo.list" :key="i">
								{{_.child[specVals[i]].name}}
								<text v-if="i!=specVals.length-1">+</text>
							</text>
						</view>
						<view class="">￥{{ specPrice }}</view>
					</view>
				</view>
				<view class="spec_item" v-for="(_, i) in specInfo.list" :key="i">
					<view class="fz30 b ptb12">{{ _.name }}</view>
					<u-tag class="fz28" v-for="(tag, index) in _.child" :key="index"
						:text="`${tag.name}${tag.price && ` (¥${tag.price})`}`" @click="specChange(i, index)"
						:type="specVals[i] === index ? 'warning' : 'info'"
						:mode="specVals[i] === index ? 'dark' : 'light'" />
					<!-- <u-subsection :list="_.child" :current="specVals[i]" active-color="#ff9900" mode="subsection"></u-subsection> -->
				</view>
				<view class="footer ptb36">
					<!-- <view class="total fz34 b">
						总计<text class="price fz40 ml28">{{ specPrice }}</text>
					</view> -->
					<u-button type="warning" size="medium" shape="circle" @click="specSubmit"
						:disabled="!storeRun">加入购物车</u-button>
				</view>
			</view>
		</u-popup>
		<!-- 购物车 -->
		<u-popup v-model="openCar" mode="bottom" border-radius="40" z-index="98" class="shopCar_pop">
			<view class="shopCar_section">
				<view class="clear">
					<text>已选购{{shopCarInfo.totalQty}}件商品</text>
					<view @click="clearCar">
						<!-- <u-icon name="trash" size="36" /> -->
						<image src="@/static/newUi/del.png" class="del" alt="" />
						清空购物车
						<image src="@/static/newUi/close.png" class="close" alt="" />
					</view>
				</view>
				<scroll-view v-if="shopCarInfo.list.length" class="shop_list" :scroll-y="true">
					<view class="shop mt24" v-for="(_, i) in shopCarInfo.list" :key="_.logo">
						<view class="title">
							<!-- <image :src="_.logo | getImg" mode="aspectFill" /> -->
							<view>
								<view class="b">{{ _.storeName }}</view>
								<!-- <view>{{ _.storeDescription }}</view> -->
							</view>
						</view>
						<view class="dishes" v-for="(dishes, index) in _.hcShoppingCartList" :key="dishes.id">
							<image :src="dishes.hcCommodity.productPicture | getImg" mode="aspectFill" />
							<!-- <u-lazy-load :image="dishes.hcCommodity.productPicture | getImg" img-mode="aspectFill" /> -->
							<view class="info pl20">
								<view class="b fz30 name">{{ dishes.hcCommodity.tradeName }}</view>
								<view class="spec" v-if="dishes.commoditySpecifications">规格:
									{{ dishes.commoditySpecifications }}
								</view>
								<view class="qty mt16">
									<text class="price fz30 b">{{ carGoodsPrice(dishes) }}</text>
									<!-- <u-number-box class="car_numbox" v-model="dishes.commodityQuantity" :data-i="i"
										:data-index="index" @plus="qtyChange(1, dishes)" @minus="qtyChange(-1, dishes)"
										:max="dishes.limitBuy > -1 ? dishes.remainingQuantity : undefined"
										disabled-input /> -->
									<view class="">
										<img src="@/static/newUi/down.png" alt="" @click="qtyChange(-1, dishes)"
											v-if="dishes.commodityQuantity>0">
										<img src="@/static/newUi/down.png" alt="" v-else>
										<u-input type="number" placeholder="" v-model="dishes.commodityQuantity"
											:max="_.limitBuy > -1 ? _.remainingQuantity : undefined" disabled></u-input>
										<img src="@/static/newUi/up.png" alt="" @click="qtyChange(1, dishes)"
											v-if="dishes.commodityQuantity<(dishes.limitBuy > -1 ? dishes.remainingQuantity:99999)">
										<img src="@/static/newUi/up.png" alt="" v-else>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<u-empty v-else text="没有购物车数据,快去挑选商品吧" mode="page" />
			</view>
		</u-popup>
		<!-- 底部结算 -->
		<view class="settle_wrap">
			<view class="car badge_p">
				<!-- <u-icon name="shopping-cart" size="60" @click="openCar = true" /> -->
				<image src="../../static/newUi/shopCar.png" @click="openCar = !openCar" mode=""></image>
				<u-badge type="error" :count="shopCarInfo.totalQty" />
				<text class="price ml30">{{ shopCarInfo.totalPrice || 0 }}</text>
			</view>
			<u-button type="warning" size="medium" shape="circle" :disabled="!shopCarInfo.totalQty" @click="settleFun"
				:loading="loading_settle">去结算</u-button>
		</view>
		<!-- 底部导航栏 -->
		<CommenFooter :checkIndex="0" />
	</movable-area>
</template>
<script>
	import {
		getMyInfo as ajaxUserInfo,
		getAddressList as ajaxAddressList,
		getStoreListWithClass as ajaxStoreList,
		getStoreListWithClassForAll as ajaxAllStoreList,
		getShopCarList as ajaxShopCarList,
		saveMyAddress,
		getMainCategories,
		getSystemInfo,
		addShopCar,
		getLatelyAddress,
		emptyShopCar,
		getCreateOrderNum,
		getAddressById,
		countDayViews,
		setOpenId,
		checkShopCarInfo,
		delFavoriteMerchant,
		addFavoriteMerchant,
	} from '@/utils/req/api.js'
	import {
		digitRound,
		jsCompute,
		debounce,
		throttle
	} from '@/utils/commen'
	import CommenFooter from '@/components/footer/footer.vue'
	import Loading from '@/components/loading/loading.vue'
	import mixins from '@/utils/minix/minix.js'
	import loadingImg from '@/static/loading.png'

	export default {
		mixins: [mixins],
		components: {
			Loading,
			CommenFooter,
		},
		data() {
			return {
				isPC: false,
				loadingImg,
				userInfo: {}, // 用户信息
				loading: false,
				// 位置信息
				openPosition: false,
				addressInfo: {}, // 地址信息
				addressList: [],
				// 已下单
				openOrder: false,
				orderList: [], // 订单列表
				// 门店资质
				openStore: false,
				// 查询门店-商品 list
				searchKey: '',
				pageInfo: {
					pageNo: 1,
					pageSize: 9999,
				},
				storeId: '', // (当前门店)门店id
				storeList: [], // 门店列表
				countInfo: {}, // 倒计时信息
				content_scroll: true,
				storeTop: '',
				dishesTop: '',
				// 规格信息
				openSpec: false,
				specVals: [], // 选中项index
				specInfo: {},
				specPrice: 0, // 总价
				// 购物车信息
				openCar: false,
				shopCarInfo: {
					totalQty: 0,
					totalPrice: 0,
					list: [],
				},
				loading_settle: false, // 结算

				isShowMore: false, //店铺简介是否显示多行
				specProImg: '', //规格的商品图片

				tempAddressInfo: '', //临时地址信息
				scrolled: false, //主体菜品是否已滑动
				merchatHeight: 0, //
			}
		},
		computed: {
			storeInfo: _this => _this.storeList?.find(_ => _.id === _this.storeId) ?? {}, // (当前门店)门店信息
			storeIndex: _this => _this.storeList?.findIndex(_ => _.id === _this.storeId) ?? 0,
			storeRun: _this => _this.storeInfo.businessState == '营业', // (当前门店)是否营业中
			storeBusinessRange: _this => _this.businessRange(_this.storeInfo?.businessHours ?? []), // (当前门店)营业时间范围
			// 当前门店倒计时
			storeCountDown: _this => _this.countDownS(_this.storeInfo?.businessHours ?? []) ?? 0,
			discountCountDown: _this => _this.countDownS([{
				startTime: _this.storeInfo.limitedTimeOffer.limitedTimeOfferStartMerchant,
				endTime: _this.storeInfo.limitedTimeOffer.limitedTimeOfferEndMerchant,
			}]) ?? 0,
			dishesList: _this => _this.storeInfo?.hcCommodityList ?? [], // (当前门店)菜品信息
			countList: _this => String(_this.orderList[0]).split(''),
			orderCount: _this => _this.orderList?.[0]?.pickingSerialNo ?? 0, // 已下单人数取[orderList]第一个序号

			contentHeight: _this => {
				console.log('_this', _this);
				if (_this.scrolled) {
					return `calc(100vh - 122px) !important`
				} else {
					_this.merchatHeight = 0
					return 'calc(100vh - 290px) !important';
				}
			}
		},
		watch: {
			addressInfo(info) {
				info?.id ? uni.setStorageSync('myCheckAddress', JSON.stringify(info)) : uni.removeStorageSync(
					'myCheckAddress')
			},
			async orderCount() {
				await this.$nextTick()
				const $countNum = document.querySelectorAll('.count_num_box')
				Array.from($countNum).forEach(ele => {
					const {
						val
					} = ele.dataset
					ele.style.transform = `translateY(-${val * 10}%)`
				})
			},
			storeId(val) {
				this.toggleStoreClass(val)
			},
			specVals(vals) {
				const {
					list,
					commodityPrice,
					commodityPriceCache
				} = this.specInfo
				let price = 0
				if (commodityPrice) {
					price = commodityPriceCache
				} else {
					vals.forEach((_, i) => {
						price = jsCompute(price, list[i]?.child[_]?.price ?? 0, '+')
					})
				}
				this.specPrice = price
			},
			// 兼容pc numberbox点击事件 START
			async dishesList(list) {
				await this.$nextTick()
				if (this.isPC && list.length) {
					const minusEles = document.querySelectorAll('.dishes_numbox .u-icon-minus')
					const plusEles = document.querySelectorAll('.dishes_numbox .u-icon-plus')
					minusEles.forEach(ele => bindClick(ele, -1))
					plusEles.forEach(ele => bindClick(ele, 1))
				}

				const vm = this

				function bindClick(ele, num) {
					if (!ele.onclick) {
						ele.onclick = throttle(function() {
							const {
								id
							} = ele.parentElement?.dataset ?? {}
							const i = vm.dishesList.findIndex(_ => _.id === id)
							const _ = vm.dishesList.find(_ => _.id === id)
							vm.qtyChange(num, _)
							_.shoppingCartCount = _.shoppingCartCount + num
							vm.$set(vm.dishesList, i, _)
							return false
						})
					}
				}
			},
			async openCar(bool) {
				if (bool) {
					await this.$nextTick()
					if (this.isPC && this.shopCarInfo.list.length) {
						const minusEles = document.querySelectorAll('.car_numbox .u-icon-minus')
						const plusEles = document.querySelectorAll('.car_numbox .u-icon-plus')
						minusEles.forEach(ele => bindClick(ele, -1))
						plusEles.forEach(ele => bindClick(ele, 1))
					}
					const vm = this

					function bindClick(ele, num) {
						if (!ele.onclick) {
							ele.onclick = throttle(function() {
								const {
									i,
									index
								} = ele.parentElement?.dataset ?? {}
								const _ = vm.shopCarInfo.list[i].hcShoppingCartList[index]
								vm.qtyChange(num, _)
								_.commodityQuantity = _.commodityQuantity + num
								vm.$set(vm.shopCarInfo, 'list', vm.shopCarInfo.list);
								return false
							})
						}
					}
				}
			},
			// 兼容pc numberbox点击事件 END
		},
		async onLoad({
			storeName = ''
		}) {
			const addressStr = uni.getStorageSync('myCheckAddress')
			if (addressStr) {
				this.addressInfo = JSON.parse(addressStr);
				this.tempAddressInfo = this.addressInfo;
			}

			this.searchKey = storeName
			const [, {
				deviceType
			}] = await uni.getSystemInfo()
			this.isPC = deviceType === 'pc'

			this.init()
		},
		async mounted() {
			document.addEventListener(
				'scroll',
				debounce(function() {
					console.log('?????')
					const position_H = document.querySelector('.position_wrap')?.offsetHeight ?? 0
					const store_H = document.querySelector('.store_wrap')?.offsetHeight ?? 0
					// this.content_scroll = window.scrollY > position_H + store_H
				}, 200)
			)
			// await this.$nextTick()
			// document.querySelector('#__vconsole').style.display = 'block'
		},
		methods: {
			async init() {
				this.getUserInfo()
				this.getAddressList()

				if (this.addressInfo?.id) {
					this.queySearch()
				} else {
					// this.getPosition() // 去掉自动定位
					this.openPosition = true
				}

				// this.orderListener()
			},
			queySearch(isLoading = true) {
				this.getStoreList(isLoading)
				this.getShopCarList()
				this.getOrderList()
			},
			async getUserInfo() {
				const {
					data
				} = await ajaxUserInfo()
				this.userInfo = data?.result ?? {}
			},
			async getPosition() {
				this.loading = true
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					highAccuracyExpireTime: 6000,
					isHighAccuracy: true, //是否开启高精度
					success: async ({
						longitude,
						latitude
					}) => {
						const {
							data
						} = await getLatelyAddress({
							longitude,
							latitude
						})
						this.loading = false
						const {
							success,
							result
						} = data
						if (success) {
							this.addressInfo = result
							this.queySearch()
						}
					},
					fail: () => {
						this.loading = false
						this.$topTips('位置获取失败,请手动选择地址', 'warning')
						this.openPosition = true
					},
				})
			},
			async getAddressList() {
				const {
					data
				} = await ajaxAddressList()
				this.addressList = (data?.result ?? []).filter(_ => _.id && _.addressName?.trim())
			},
			async addressChange(_) {
				this.addressInfo = _
				this.queySearch()
				this.openPosition = false
			},
			// 实时获取订单量
			async orderListener() { // 阿里云对ws通讯额外收费 暂时废弃
				const socket = new WebSocketClient({
					url: `/ws/order`
				})
				socket.subscribe('message', ({
					data,
					...rest
				}) => {
					console.log('[data] :', data)
					console.log(`event:`, rest)
					// if (data) {
					//   console.log('[ty_Log-------[data]] :  -493', data)
					//   console.log('[ty_Log-------[res]] :  -494', res)
					// }
				})
				// socket.subscribe('open', () => console.log(`[连接成功] :`, ...arguments))
				// socket.subscribe('reconnect', () => console.log(`[重连ing] :`, ...arguments))
			},
			async getOrderList() {
				const params = {
					pageNo: 1,
					pageSize: -1,
					addressId: this.addressInfo.id,
				}
				const {
					data
				} = await getCreateOrderNum(params)
				if (data.success) {
					this.orderList = data?.result?.records ?? []
				}
			},
			async getStoreList(needLoading = true) {
				const params = {
					addressId: this.addressInfo?.id,
					storeName: this.searchKey,
					...this.pageInfo,
				}
				try {
					needLoading && (this.loading = true)
					const {
						data = {}
					} = await ajaxStoreList(params)
					this.loading = false
					this.storeList = data?.result?.records ?? []
					if (!this.storeId || this.storeList.every(_ => _.id !== this.storeId)) this.storeId = this
						.storeList[0].id
					await this.$nextTick()
					// 门店列表 当前门店置顶
					this.storeTop = `store_${this.storeId}`
				} catch (error) {
					this.loading = false
				}
			},
			// 门店信息 回到顶部
			storeBackTop() {
				const position_H = document.querySelector('.position_wrap')?.offsetHeight ?? 0
				scrollTo(0, position_H)
			},
			async toggleFavorite() {
				const {
					isFavorite,
					id: merchantId
				} = this.storeInfo
				const {
					id: userId
				} = this.userInfo
				const ajaxFun = isFavorite == 1 ? delFavoriteMerchant : addFavoriteMerchant
				await ajaxFun({
					merchantId,
					userId
				})
				this.getStoreList(false)
			},
			async toggleStore({
				id
			}) {
				this.storeId = id
				await this.$nextTick()
				// 菜品列表 回到顶部
				this.dishesTop = `dishes_${this.dishesList[0]?.id}`
				this.storeBackTop()

				this.showMore = false;
			},
			async toggleStoreClass(storeId) {
				await this.$nextTick()
				const active_i = this.storeList.findIndex(_ => _.id === storeId)
				const $store_list = document.querySelectorAll('.store_list .store_item')
				$store_list.forEach(($_, i) => {
					const classes = $_.getAttribute('class')
					let delClasses = classes.replace(' prev', '').replace(' next', '').trim()
					$_.setAttribute('class', delClasses)
				})
				const $prev = $store_list[active_i - 1]
				$prev?.setAttribute('class', `${$prev?.getAttribute('class')} prev`)
				const $next = $store_list[active_i + 1]
				$next?.setAttribute('class', `${$next?.getAttribute('class')} next`)
			},
			// 加购 START
			async getShopCarList() {
				const params = {
					addressId: this.addressInfo.id,
				}
				const {
					data
				} = await ajaxShopCarList(params);
				console.log('data', data);
				const shopCarList = data?.result ?? []
				const carDishesList = shopCarList.map(_ => _.hcShoppingCartList ?? []).flat()
				let totalQty = 0,
					totalPrice = 0,
					discountAmount = 0;
				carDishesList.forEach(({
					commodityQuantity,
					commodityPrice,
					limitedTimeOfferState,
					limitTotalAmount
				}) => {
					totalQty = jsCompute(totalQty, commodityQuantity, '+')
					totalPrice = jsCompute(totalPrice, commodityPrice, '+');
					limitedTimeOfferState == 1 && (discountAmount = limitTotalAmount)
				})
				totalPrice = jsCompute(totalPrice, discountAmount, '-');
				this.shopCarInfo = {
					totalQty,
					totalPrice,
					list: shopCarList,
				}
			},
			async showSpec({
				commoditySpecifications,
				productPicture
			}) {
				console.log('productPicture', productPicture);
				const list = JSON.parse(commoditySpecifications ?? '[]')

				this.specProImg = productPicture;

				this.specVals = new Array(list.length).fill(0) // 默认勾选第一个
				this.specInfo = {
					list,
					...arguments[0],
				}
				this.openSpec = true
			},
			// 计算规格上的数量
			specCount({
				id,
				merchantId
			}) {
				const {
					list = []
				} = this.shopCarInfo
				const {
					hcShoppingCartList
				} = list.find(_ => _.id === merchantId) ?? {} // 当前门店 在购物车中的商品
				if (hcShoppingCartList) {
					const inCarDishesList = hcShoppingCartList.filter(_ => _?.commodityId === id) // 同款但规格不同的商品
					if (inCarDishesList && inCarDishesList.length) {
						const totalCount = inCarDishesList.map(_ => _.commodityQuantity).reduce((curr, next) => curr +
							next, 0) // 合计不同规格的商品数量
						return totalCount
					} else {
						return 0
					}
				} else {
					return 0
				}
			},
			// 商品规格 change
			specChange(i, index) {
				this.$set(this.specVals, i, index)
			},
			async specSubmit() {
				const {
					id,
					list
				} = this.specInfo

				const specNameList = this.specVals.map((_, i) => list[i]?.child[_]?.name ?? '')
				const params = {
					commodityId: id,
					commodityQuantity: 1,
					commoditySpecifications: specNameList.join(','),
				}
				this.updateCar(params)
				this.openSpec = false
			},
			// 商品数量 change
			qtyChange: throttle(function(count, {
				id,
				hcCommodity,
				commoditySpecifications
			}) {
				const params = {
					commodityId: hcCommodity?.id ?? id, // 购物车添加 ?? 商品列表添加
					commodityQuantity: count,
					commoditySpecifications,
				}
				this.updateCar(params)
			}),
			async updateCar(params) {
				const baseParams = {
					addressId: this.addressInfo.id,
				}
				await addShopCar({
					...baseParams,
					...params
				})
				this.queySearch(false)
			},
			async clearCar() {
				if (!this.shopCarInfo?.list?.length) return
				await emptyShopCar()
				this.queySearch(false)
				this.openCar = false
			},
			// 购物车单个商品 合计价格 表达式
			carGoodsPrice({
				hcCommodity,
				commodityQuantity,
				commodityPrice,
				limitTotalAmount,
				limitedTimeOfferState
			}) {
				const {
					commodityPriceCache
				} = hcCommodity
				let total = commodityPriceCache ? jsCompute(commodityPriceCache, commodityQuantity, '*') : commodityPrice
				if (limitedTimeOfferState == 1) {
					return jsCompute(total, limitTotalAmount, '-')
				} else {
					return total
				}
			},
			// 购物车门店 运营状态 表达式
			carStoreRun: storeInfo => storeInfo.businessState == '营业',
			// 加购 END
			async settleFun() {
				const addressId = this.addressInfo.id
				try {
					this.loading_settle = true
					const {
						data
					} = await checkShopCarInfo({
						addressId
					})
					this.loading_settle = false
					if (data.success) {
						uni.navigateTo({
							url: `/pages/my/order/createOrder?addressId=${addressId}`,
						})
					} else {
						this.$topTips(data.message, 'warning')
					}
				} catch (error) {
					this.loading_settle = false
				}
			},

			// UI改版
			_addressChange(_) {
				this.tempAddressInfo = _;
			},
			confrimAddressSearch() {
				this.addressInfo = this.tempAddressInfo
				this.queySearch()
				this.openPosition = false
			},
			closeAddressAlert() {
				this.tempAddressInfo = this.addressInfo;
				this.openPosition = false;
			},
			dishesScroll(e) {
				this.merchatHeight = document.getElementsByClassName('merchat')[0].clientHeight;
				if (e.target.scrollTop > 5) {
					this.scrolled = true;
					console.log('我消失了', e.target.scrollTop);
				} else {
					this.scrolled = false;
					console.log('我显示了', e.target.scrollTop);
				}
			},
			isDiscount() {
				if (this.storeInfo.limitedTimeOffer.isLimitedTimeOfferOpenMerchant != 1) {
					return false
				} else {
					const _date = new Date();
					const _tempDate = _date.getFullYear() + '-' + (_date.getMonth() + 1) + '-' + new Date()
						.getDate();
					const nowStemp = _date.getTime()
					const startStemp = new Date(_tempDate + ' ' + this.storeInfo.limitedTimeOffer
						.limitedTimeOfferStartMerchant).getTime();
					const endStemp = new Date(_tempDate + ' ' + this.storeInfo.limitedTimeOffer
						.limitedTimeOfferEndMerchant).getTime();
					if (startStemp < endStemp) {
						if (nowStemp < endStemp && nowStemp > startStemp) {
							return true
						} else {
							return false
						}
					} else {
						if (nowStemp < endStemp + 1000 * 60 * 60 * 24 && nowStemp > startStemp) {
							return true
						} else {
							return false
						}
					}
				}
			}
		},
	}
</script>
<style lang="scss">
	$bg_color: #f5f5f5;
	$bg_gray: #f7f7f7;
	$score_color: #fc360b; // 评分
	$active_color: #ff9900; // tab active
	$price_color: #fa690a; // 价格
	$deep_color: #040404;
	$liner_color: linear-gradient(100deg, #ff602e 0%, #f96a02 100%);

	* {
		box-sizing: border-box;
	}

	@mixin textOver($line: 1) {
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;

		white-space: nowrap;

		@if ($line !=1) {
			white-space: initial;
			/* 超出行数 */
			display: -webkit-box;
			-webkit-line-clamp: $line;
			-webkit-box-orient: vertical;
		}
	}

	/* 单行文本溢出 */
	.text_over {
		@include textOver();
	}

	.page_wrap {
		width: 100vw;
		height: 100vh;
		// overflow: hidden;
		background-color: $bg_color;
		font-size: 26rpx;
	}

	// 顶部导航栏
	.position_wrap {
		// background: $liner_color;
		color: #e9ebed;
		display: flex;
		align-items: center;
		height: 80rpx;
		line-height: 80rpx;
		padding-left: 0;
		padding-right: 0;

		.u-icon {
			&.arrow {
				position: relative;
				top: 4rpx;
			}
		}

		>.pl16 {
			display: flex;
			justify-items: flex-start;
			align-items: center;
			padding: 0 20rpx;

			image {
				width: 56rpx;
				height: 56rpx;
			}
		}
	}

	.search_wrap {
		// background: $liner_color;
		background: linear-gradient(146deg, #FF4A37 0%, #FF923F 100%);
		position: sticky;
		top: 0;
		z-index: 9;

		// border-bottom-left-radius: 16rpx;
		// border-bottom-right-radius: 16rpx;
		/deep/.u-search {
			position: relative;

			.u-content {
				width: 100%;
				padding-right: 100rpx;
			}

			.u-action {
				position: absolute;
				right: 20rpx;
				color: $price_color;
			}
		}
	}

	// 门店信息
	.store_wrap {
		height: auto;
		flex-shrink: 0;
		border-radius: 16rpx !important;

		.u-card__body>view {
			display: flex;
			align-items: center;

			>image {
				$img_size: 150rpx;
				width: $img_size;
				height: $img_size;
				border-radius: 10rpx;
			}

			.r_box {
				flex: 1;
				flex-direction: column;

				.storeInfo_item {
					display: flex;
					padding-left: 20rpx;
					margin-bottom: 10rpx;

					&:last-of-type {
						margin-bottom: 0;
					}

					&.name {
						>text {
							flex: 1;
							color: $deep_color;
						}
					}

					&.score {
						>view>text {
							padding-left: 8rpx;
							color: $score_color;
						}

						view:nth-of-type(2) {
							margin: 0 40rpx;
						}
					}

					&.time {
						>view:first-of-type {
							flex: 1;
							color: $deep_color;
						}
					}

					&.tag {
						display: block;

						.u-tag {
							font-size: 24rpx;
							padding: 4rpx 12rpx;
							margin: 0 10rpx 10rpx 0;
							border-radius: 12rpx;
						}
					}
				}
			}
		}
	}

	// 门店list - 菜品list
	.content_wrap {
		overflow-y: hidden;
		height: calc(100vh - 100rpx);
		display: flex;
		border-radius: 8rpx;
		padding-bottom: 208rpx;

		.store_list {
			height: 100%;
			width: 200rpx;
			background-color: $bg_color;

			.store_item {
				background-color: #fff;
				color: gray;
				$radius: 16rpx;

				.bg {
					background-color: $bg_color;
				}

				&.active {
					color: $deep_color;
					font-weight: 600;

					.bg {
						background-color: #fff;
					}

					// 后一个元素
					// & + view {
					//   .bg {
					//     border-top-right-radius: $radius;
					//   }
					// }
				}

				&.prev {
					.bg {
						border-bottom-right-radius: $radius;
					}
				}

				&.next {
					.bg {
						border-top-right-radius: $radius;
					}
				}
			}
		}

		.dishes_list {
			height: 100%;
			width: calc(100% - 200rpx);
			background: #fff;
			padding: 16rpx;

			.dishes_item {
				display: flex;
				position: relative;

				/deep/.u-wrap {
					$img_size: 220rpx;
					width: $img_size;
					height: $img_size;
					border-radius: 16rpx !important;

					image {
						border-radius: 16rpx !important;
					}
				}

				.required {
					position: absolute;
					left: 0;
					top: 0;
					background-color: #fa690a;
					color: #fff;
					font-size: 20rpx;
					border-radius: 5rpx;
					padding: 0 10rpx;
					line-height: 1.5;
					font-weight: bold;
				}

				.r_box {
					flex: 1;
					padding-left: 20rpx;

					.dishesInfo_item {
						margin-bottom: 12rpx;

						&.desc {
							color: gray;
						}

						&.price_remain {
							display: flex;
							align-items: center;

							.price {
								flex: 1;
								padding-left: 0;

								&::before {
									font-size: 24rpx;
								}

								.disable {
									font-size: 28rpx;
									text-decoration: line-through;
									margin-left: 10rpx;
									color: #000;
									font-weight: 400;
								}
							}
						}

						&.qty {
							text-align: right;
						}
					}
				}
			}
		}
	}

	// 营业状态 tag
	.business_status {
		font-size: 22rpx;
		height: 42rpx;
		line-height: 42rpx;

		&.ing {
			margin-left: 10rpx;

			@include flexs(flex-end, center);
			flex-shrink: 0;
			color: rgba(0, 0, 0, 0.55);

			>view:nth-child(1) {
				background: linear-gradient(271.21deg, #f25b48 -4.12%, #f68758 99.23%);
				color: #fff;
				padding: 0 5rpx;
				border-bottom-left-radius: 5rpx;
				border-top-left-radius: 5rpx;
			}

			// /deep/.uni-countdown {
			/deep/.u-countdown {
				height: 42rpx;
				padding: 0 5rpx;
				font-weight: bold;
				border-top-right-radius: 5rpx;
				border-bottom-right-radius: 5rpx;
				background: #ffdddd !important;

				// .uni-countdown__number,
				// .uni-countdown__splitor {
				//   color: #ff0000 !important;
				// }
				// .uni-countdown__number {
				//   width: 36rpx !important;
				// }

				.u-countdown-item {
					background: #ffdddd !important;
					padding: 0;

					.u-countdown-time {
						color: #ff0000 !important;
					}
				}

				.u-countdown-colon {
					color: #ff0000 !important;
					padding: 0 2rpx;
				}
			}
		}

		&.end {
			background-color: #e9ebed;
			border-radius: 22rpx;
			color: rgba(0, 0, 0, 0.55);
			padding: 0 10rpx;

			text {
				color: $deep_color;
				margin-left: 10rpx;
			}
		}
	}

	/** --------- */
	// drawer
	/deep/.u-drawer {
		max-width: 100%;
	}

	// 懒加载图片
	/deep/.u-wrap {
		position: relative;

		image {
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			right: 0;
			max-width: 100%;
			max-height: 100%;
		}
	}

	// badge
	.badge_p {
		display: inline-block;
		position: relative;

		.u-badge {
			padding: 4rpx 10rpx; //单数 不够圆
		}
	}

	// price
	.price {
		color: $price_color;
		font-weight: 600;
		position: relative;
		padding-left: 16rpx;

		// &::before {
		// 	content: '¥';
		// 	position: absolute;
		// 	left: -4rpx;
		// 	bottom: 5rpx;
		// }
	}

	/** -------- */
	// 选位置
	.position_section {
		>.title {
			color: gray;
		}

		.position_list {
			max-height: 70vh;

			.position_item {
				height: 80rpx;
				line-height: 80rpx;
				border-bottom: 2rpx solid $bg_gray;
			}
		}
	}

	// 已下单列表
	.order_fix {
		z-index: 97;
		width: fit-content;
		height: auto;
		// background: linear-gradient(100deg, rgba(#ff602e, 0.8) 0%, rgba(#f96a02, 0.5) 100%);
		background: linear-gradient(90deg, rgba(#57bd6a, 0.8) 0%, rgba(#57bd6a, 0.5) 100%);
		color: #fff;
		border-radius: 12rpx;

		.tips {
			display: flex;
			line-height: 28rpx;

			.scroll_num {
				height: 24rpx;
				overflow: hidden;

				.count_num_box {
					width: 28rpx; // 部份手机认为宽度为0，需要设置宽度
					writing-mode: vertical-rl;
					text-orientation: upright;
					transform: translateY(0%);
					transition: transform linear 1.2s;
				}
			}
		}
	}

	.order_section {
		>view {
			text-align: center;
		}

		.tips {
			>text {
				color: $score_color;
			}
		}

		.order_list {
			.order_item {
				background-color: $bg_gray;

				>view {
					&:nth-of-type(1) {
						display: flex;

						>text {
							padding-left: 16rpx; // space
						}

						>text:nth-of-type(1) {
							min-width: 80rpx;
						}

						>text:nth-of-type(2) {
							flex: 1;
							@include textOver();
						}

						>text:nth-of-type(3) {
							min-width: 120rpx;
						}

						>text:nth-of-type(4) {
							min-width: 154rpx;
							text-align: right;
						}
					}
				}
			}
		}
	}

	// 门店营业资质
	.store_section {
		.img_list {
			max-height: 80vh;
		}
	}

	// 选规格
	.spec_section {
		padding: 40rpx 24rpx 24rpx;

		>.spec_item {
			margin-top: 16rpx;

			.u-tag {
				$space: 14rpx;
				margin: 0 $space $space 0;

				&.u-mode-dark-warning {
					border: 2rpx solid $active_color;
				}
			}
		}

		>.footer {
			display: flex;

			.total {
				flex: 1;
			}

			.price {
				padding-left: 20rpx;

				&::before {
					font-size: 26rpx;
				}
			}
		}
	}

	// 购物车
	.shopCar_pop {

		// max-width: 100%;
		/deep/.u-drawer-content {
			bottom: 200rpx;
		}
	}

	.shopCar_section {
		padding: 24rpx;
		font-size: 28rpx;

		.clear {
			text-align: right;
			color: rgba(0, 0, 0, 0.35);
		}

		.shop_list {
			max-height: 65vh;

			.shop {
				>.title {
					display: flex;
					padding-bottom: 12rpx;
					border-bottom: 2rpx solid #ccc;

					>image {
						$img_size: 100rpx;
						width: $img_size;
						height: $img_size;
						border-radius: 10rpx;
					}

					>view {
						padding-left: 20rpx;
					}
				}

				>.dishes {
					display: flex;
					padding: 24rpx 0 24rpx 30rpx;

					>image {
						$img_size: 100rpx;
						width: $img_size;
						height: $img_size;
						border-radius: 10rpx;
					}

					>.info {
						flex: 1;

						>.qty {
							display: flex;
							align-items: center;

							.price {
								flex: 1;
								padding-left: 16rpx;

								&::before {
									font-size: 20rpx;
								}
							}
						}
					}
				}
			}
		}
	}

	// 底部结算
	.settle_wrap {
		position: fixed;
		z-index: 99;
		width: 100%;
		bottom: 120rpx;
		background: #fff;
		padding: 20rpx 30rpx;
		display: flex;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;

		.car {
			flex: 1;

			.u-badge {
				top: unset !important;
				right: unset !important;

				top: -10rpx !important;
				left: 45rpx !important;
			}

			.price {
				font-size: 42rpx;
				padding-left: 20rpx;

				&::before {
					font-size: 28rpx;
				}
			}
		}

		>.u-btn {
			font-size: 30rpx;
		}
	}

	.topBox {
		background: linear-gradient(146deg, #FF4A37 0%, #FF923F 100%);
		padding: 0 28rpx;
		padding-bottom: 60rpx;
	}

	.searchBox {
		margin: 10rpx auto;
		background-color: #fff;
		border-radius: 20rpx;
		position: relative;
		@include flexs();

		.u-input {
			padding-left: 20rpx !important;
		}

		image {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			right: 24rpx;
			top: calc((100% - 48rpx) / 2);
		}
	}

	.position_wrap {
		>.pl16 {
			display: flex;
			justify-items: flex-start;
			align-items: center;
			padding: 0 20rpx;

			image {
				width: 56rpx;
				height: 56rpx;
			}
		}
	}

	::v-deep .store_wrap {
		margin-top: -30rpx !important;
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
	}

	::v-deep .u-card__body {
		padding-left: 20rpx !important;
		padding-right: 20rpx !important;
	}

	.merchat {
		display: block !important;

		.info {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			>view {
				width: calc((100% - 120rpx));

				>view:nth-child(1) {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					font-family: PingFang SC, PingFang SC;

					>view:nth-child(1) {
						font-size: 34rpx;
						color: #333333;
						line-height: 42rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						max-width: calc((100% - 130rpx));
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						-o-text-overflow: ellipsis;
					}

					.ing {
						background-image: url('@/static/newUi/litBac.png');
						font-size: 22rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						background-size: 100% 100%;
						background-repeat: no-repeat;
						padding: 4rpx 10rpx 4rpx 4rpx;
						margin-left: 10rpx;
						color: #fff;
						width: 205rpx;
						flex-shrink: 0;

						>view {
							&:nth-child(1) {
								flex: 1;
								padding-right: 10rpx;
							}
						}

						::v-deep .u-countdown {
							width: 100rpx;

							view {
								padding: 0 !important;
								background-color: rgba(0, 0, 0, 0) !important;
								font-size: 22rpx !important;
								color: #FA565C !important;
							}
						}
					}

					.ings {
						@include flexs();
						background-size: 100% 100%;
						border: 1px solid rgb(255, 127, 87);

						>view {
							&:nth-child(1) {
								flex: 1;
								background-color: rgb(255, 127, 87);
								padding: 0 10rpx;
								color: #fff;
								font-size: 24rpx;
							}
						}
						::v-deep .u-countdown {
							width: 100rpx;
							margin-left: 5rpx;

							view {
								padding: 0 !important;
								background-color: rgba(0, 0, 0, 0) !important;
								font-size: 22rpx !important;
								color: #FA565C !important;
							}
						}
					}

					.business_status {
						margin-left: 10rpx;
					}

					img {
						width: 36rpx;
						height: 36rpx;
						margin-left: 10rpx;
					}
				}

				.score {
					margin: 6rpx 0;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					>view {
						color: #999;
						font-size: 22rpx;
						line-height: 42rpx;

						text {
							padding-left: 8rpx;
							margin-right: 10rpx;
							color: #666;
						}
					}
				}

				.tagBox {
					width: 100%;
					overflow: auto;

					>view {
						width: 1000px;
						white-space: nowrap;

						view {
							width: auto;
							display: inline-block;
							background: #FFEEEA;
							border-radius: 2px 2px 2px 2px;
							padding: 8rpx 12rpx;
							margin-right: 16rpx;
							margin-bottom: 16rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
							color: #FF4A37;
							line-height: 22rpx;
						}
					}
				}
			}


			image {
				width: 120rpx;
				height: 120rpx;
				flex-shrink: 0;
				border-radius: 16rpx;
				object-fit: cover;
			}
		}

		.describe {
			margin: 14rpx 0;
			position: relative;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 22rpx;
			color: #999999;
			line-height: 36rpx;

			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			-o-text-overflow: ellipsis;

			image {
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				right: 0;
				top: 0;
				background-color: rgb(229, 229, 229);
			}
		}

		.introduce {
			padding: 40rpx 0;

			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 22rpx;

				view {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #333333;
				}

				image {
					width: 40rpx;
					height: 40rpx;
					transform: rotate(180deg);
					background-color: rgb(229, 229, 229);
				}
			}

			.imgBox {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-bottom: 38rpx;

				image {
					width: 144rpx;
					height: 144rpx;
					border-radius: 8rpx;
					margin-right: 16rpx;
					object-fit: cover;
				}
			}

			.des {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				line-height: 36rpx;
			}
		}

		.showMore {
			white-space: wrap;
		}
	}

	.content_wrap .dishes_list .dishes_item {
		display: block;

		/deep/.u-wrap {
			width: 100%;
			height: auto;
			object-fit: cover;

			view {
				padding-bottom: 78%;
			}
		}

		.r_box {
			padding: 24rpx 0;

			.name {
				display: flex;
				align-items: center;
				justify-content: space-between;

				view:nth-child(2) {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}
			}

			.desc {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #999999;
				line-height: 1.5;
				margin: 20rpx 0;
			}

			.qty {
				display: flex;
				justify-content: flex-end;
				align-items: center;

				img {
					width: 40rpx;
					height: 40rpx;
				}

				.u-input {
					width: 60rpx !important;
					text-align: center !important;

					::v-deep .u-input__input {
						font-family: Inter, Inter;
						font-weight: 400;
						font-size: 24rpx;
						color: #333333;
						line-height: 28rpx;
					}
				}
			}

			.price {
				color: #FF4A37;
			}

			.spec {
				::v-deep .u-mode-dark-warning {
					background-color: #FF4A37;
				}
			}
		}

	}

	.price[data-v-71e217db]::before {
		left: 0;
		color: #FF4A37;
	}

	.settle_wrap {
		.car {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			image {
				width: 72rpx;
				height: 72rpx;
				border-radius: 50%;
				background: #FF4A37;
				border-radius: 26px 26px 26px 26px;
				padding: 16rpx;
			}

			.u-badge {
				left: 52rpx !important;
				border: 1px solid #fff;
			}

			text {
				color: #EE3E3E;
			}
		}
	}

	.shopCar_pop {
		::v-deep .u-drawer-content {
			bottom: 210rpx
		}
	}

	.shopCar_section {
		padding-bottom: 60rpx;

		.clear {
			text-align: left;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #eee;
			padding: 0 0 24rpx 0;

			view {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.del {
				width: 28rpx;
				height: 28rpx;
				margin-right: 10rpx;
			}

			.close {
				width: 48rpx;
				height: 48rpx;
				margin-left: 32rpx;
			}
		}

		.shop_list .shop {
			border-bottom: 1px solid #eee;

			&:last-child {
				border-bottom: 1px solid #eee;
			}

			.title {
				border: 0;
				margin-top: 36rpx;

				view {
					padding-left: 0;
					height: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 16px;
					color: #000000;
					line-height: 24rpx;
				}
			}

			.dishes {
				padding-left: 0;

				>image {
					width: 112rpx;
					height: 112rpx;
				}

				.info {
					flex: 1;
					height: 112rpx;
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					flex-direction: column;

					.name {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
						line-height: 36rpx;
					}

					.spec {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						line-height: 24rpx;
					}

					.qty {
						width: 100%;
						margin-top: 0;
						display: flex;
						justify-content: space-between;
						align-items: center;

						>view {
							display: flex;
							justify-content: flex-end;
							align-items: center;
						}

						img {
							width: 40rpx;
							height: 40rpx;
						}

						.u-input {
							width: 60rpx !important;
							text-align: center !important;

							::v-deep .u-input__input {
								font-family: Inter, Inter;
								font-weight: 400;
								font-size: 24rpx;
								color: #333333;
								line-height: 28rpx;
								min-height: auto !important;
							}
						}
					}
				}
			}
		}
	}

	.orderCountBox {
		position: fixed;
		top: 10vh;
		left: 0;
		z-index: 2;

		img {
			width: 268rpx;
			height: 186rpx;
		}

		view {
			width: 100%;
			position: absolute;
			left: 0;
			bottom: 25rpx;
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 22rpx;
			color: #B32A2E;
			line-height: 26rpx;
		}
	}

	.spec_section {
		position: relative;

		.close {
			position: absolute;
			right: 32rpx;
			top: 20rpx;
			width: 48rpx;
			height: 48rpx;
		}

		.fz32 {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			height: 192rpx;
			width: 100%;

			.u-wrap {
				width: 192rpx;
				height: 192rpx;
				border-radius: 16rpx !important;
				margin-right: 24rpx;
			}

			>view {
				&:nth-child(2) {
					flex: 1;
				}

				height: 100%;
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				flex-direction: column;

				view:nth-child(1) {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
					line-height: 1;
				}

				view:nth-child(2) {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					line-height: 1;
				}

				view:nth-child(3) {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 40rpx;
					color: #EE3E3E;
					line-height: 1;
				}
			}
		}

		/deep/ .u-mode-dark-warning {
			border: 1px solid #FF4A37;
			background: rgba(255, 182, 174, 0.2);
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #FF4A37;
			line-height: 28rpx;
			padding: 16rpx 24rpx;
		}

		.footer {
			.u-btn {
				width: 100% !important;
			}

			::v-deep .u-btn--warning {
				padding: 30rpx 0 !important;
				height: auto;
				margin-top: 99rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 32rpx;
			}
		}
	}

	.content_wrap {
		height: calc(100vh - 605rpx) !important;
		padding-bottom: 0;

		::v-deep .store_list {
			width: 270rpx !important;

			.store_item {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				line-height: 36rpx;

				.ptb24 {
					padding: 32rpx 28rpx;
				}
			}
		}

		/deep/ .uni-scroll-view {
			// padding-bottom: 0;

			.dishes_item {
				width: 95%;
				margin: 0 auto !important;
			}
		}
	}

	.posiBox {
		max-height: 70vh;
		padding: 0 32rpx;
		position: relative;

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 36rpx;
			color: #333333;
			line-height: 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #f4f4f4;
			padding: 26rpx 0;
			margin-bottom: 0;

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.posiContent {
			// padding: 0 32rpx;
			padding-bottom: 180rpx;

			.posiList {
				margin: 24rpx 0;
				padding: 40rpx 24rpx;
				position: relative;
				border-radius: 16rpx;
				overflow: hidden;
				border: 1px solid #E5E5E5;

				>image {
					width: 64rpx;
					height: 64rpx;
					position: absolute;
					top: 0;
					right: 0;
				}

				view {
					&:nth-child(1) {
						font-weight: 500;
						font-size: 32rpx;
						color: #333333;
						line-height: 32rpx;
						margin-bottom: 20rpx;
					}

					&:nth-child(2) {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						line-height: 24rpx;

						image {
							width: 26rpx;
							height: 26rpx;
							margin-right: 4rpx;
						}
					}
				}
			}

			.check {
				border: 1px solid #FF4A37;
			}
		}

		.button {
			width: 674rpx;
			height: 80rpx;
			background: #FF4A37;
			border-radius: 48rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 80rpx;
			position: fixed;
			bottom: 76rpx;
			left: calc((100% - 674rpx) / 2);
			text-align: center;
		}
	}

	.searchFix {
		position: fixed;
		width: calc(100% - 40rpx);
		left: 20rpx;
		top: 15rpx;
		padding: 0 20rpx;
	}

	.orderAlert {

		// /deep/.u-drawer-content{
		// 	min-height: 30vh;
		// 	max-height: 70vh;
		// }
		.order_section {
			position: relative;
			padding: 0;

			.close {
				width: 48rpx;
				height: 48rpx;
				border-radius: 50%;
				position: absolute;
				right: 32rpx;
				top: 0;
				z-index: 2;
			}

			.orderList {
				padding: 0;
				margin: 32rpx;
				width: calc(100% - 64rpx);
			}

			.order_item {
				position: relative;
				padding: 56rpx 14rpx 40rpx 14rpx;
				border-radius: 16rpx;
				overflow: hidden;
				margin: 20rpx 0;
				background: #F4F4F4;

				.num {
					position: absolute;
					left: 0;
					top: 0;
					padding: 6rpx 14rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 22rpx;
					color: #FFFFFF;
					line-height: 24rpx;
					background-color: rgb(255, 74, 55);
					border-top-left-radius: 24rpx;
					border-bottom-right-radius: 24rpx;
				}

				.mb12 {
					margin-bottom: 24rpx;

					text {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						line-height: 24rpx;
						margin-right: 32rpx;
					}
				}

				.text_over {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					line-height: 24rpx;
					white-space: wrap;
					line-height: 1.5;
				}
			}
		}
	}

	::v-deep .u-btn--warning {
		background: #FF4A37;
		border-color: #FF4A37;
	}
</style>